import { Form, Button, Col, Row, Input, Select, message } from 'antd';
import React, { Component } from 'react';
import { Agentadd } from '../../../services/auth';
import { Companylist } from '../../../services/auth';
const { Option } = Select;

export default class CreateAgent extends Component {
	constructor(props) {
		super(props);
		const { handleCreateClick } = this.props;
		this.handleCreateClick = handleCreateClick;
		this.state = { companyList: [] };
	}
	formRef = React.createRef();
	onFinish = (values) => {
		Agentadd(values).then(
			(response) => {
				if (response.data.result === 'success') {
					message.success('账号' + response.data.agent_id + '已创建成功');
					this.formRef.current.resetFields();
					this.handleCreateClick();
				} else {
					message.info('提交失败，请重试');
				}
			},
			(error) => {
				console.log('数据获取失败', error);
			}
		);
	};
	componentDidMount() {
		Companylist().then(
			(response) => {
				//拿到我们想要渲染的数据(res)
				this.setState({
					visible: true,
					companyList: response.data
				});
			},
			(error) => {
				console.log('失败了', error);
			}
		);
	}

	render() {
		return (
			<Form layout="vertical" hideRequiredMark onFinish={this.onFinish} ref={this.formRef}>
				<Row gutter={24}>
					<Col span={12}>
						<Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
							<Input />
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item name="company_id" label="公司" rules={[ { required: true, message: '请选择公司' } ]}>
							<Select placeholder="必选项">
								{this.state.companyList.map((company) => (
									<Option value={company.id} key={company.id}>
										{company.id + ' ' + company.name}
									</Option>
								))}
							</Select>
						</Form.Item>
					</Col>
				</Row>
				<Row gutter={24}>
					<Col span={12}>
						<Form.Item name="phone" label="电话">
							<Input />
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item name="email" label="邮箱">
							<Input />
						</Form.Item>
					</Col>
				</Row>
				<Row gutter={24} />

				<Form.Item>
					<div
						style={{
							textAlign: 'right'
						}}
					>
						<Button onClick={this.onClose} style={{ marginRight: 8 }}>
							取消
						</Button>
						<Button htmlType="reset" style={{ marginRight: 8 }}>
							重置
						</Button>
						<Button type="primary" htmlType="submit">
							提交
						</Button>
					</div>
				</Form.Item>
			</Form>
		);
	}
}
